<template>
  <div id="esc-app">
    <div class="login" v-if="['/Login', '/NoIscLogin'].includes($route.path)">
      <router-view></router-view>
    </div>
    <div class="login" v-else>
      <UserLogins />
      <Menu />
      <PageContent />
    </div>
  </div>
</template>

<script>
// import axios from "axios";
import axios from "../src/api/index";
import Menu from "./components/NavigationMenu.vue";
import PageContent from "./components/PageContent.vue";
import UserLogins from "./components/UserLogins.vue";

export default {
  name: "App",
  data() {
    return {
      receiveMessage: {}
    };
  },
  components: {
    Menu,
    PageContent,
    UserLogins
  },
  created() {
    const MenuIndex = sessionStorage.getItem("MenuIndex");
    if (MenuIndex) this.$store.commit("SET_MenuIndex", MenuIndex);
    if (JSON.parse(sessionStorage.getItem("account")) && JSON.parse(sessionStorage.getItem("account")).id) {
      const FilledBy = {
        accessToken: JSON.parse(sessionStorage.getItem("accessToken")), // token
        unsrId: JSON.parse(sessionStorage.getItem("account")).id
      };
      this.FilledBy = FilledBy;
      this.webSocketInit(FilledBy.unsrId);
    }
    // 解决刷新页面vuex中的powerList数据丢失问题
    // 在页面加载时读取sessionStorage里的状态信息,然后删除sessionStorage
    if (sessionStorage.getItem("powerList")) {
      this.$store.commit("SET_Power", JSON.parse(sessionStorage.getItem("powerList")));
      sessionStorage.removeItem("powerList");
    }
    if (sessionStorage.getItem("nowPowerList")) {
      this.$store.commit("SET_NowPower", JSON.parse(sessionStorage.getItem("nowPowerList")));
      sessionStorage.removeItem("nowPowerList");
    }
    // 在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("powerList", JSON.stringify(this.$store.state.powerList));
      sessionStorage.setItem("nowPowerList", JSON.stringify(this.$store.state.nowPowerList));
    });

  },
  methods: {
    webSocketInit(id) {
      const Url = "ws://10.0.0.206:16070/system/websocket/" + id;
      const Url1 = "wss://192.168.0.206/wss/" + id;
      const webSocketUrl = process.env.NODE_ENV === "test" ? Url1 : Url;
      this.webSocketObject = new WebSocket(webSocketUrl);
      this.webSocketObject.onopen = this.webSocketOnOpen;
      this.webSocketObject.onmessage = this.webSocketOnMessage;
      this.webSocketObject.onerror = this.webSocketOnError;
      this.webSocketObject.onclose = this.webSocketOnClose;
    },
    webSocketOnOpen(e) {
      console.log("与服务端连接打开app", e);
    },
    webSocketOnMessage(e) {
      console.log("来自服务端的消息app", e);
      this.receiveMessage = JSON.parse(e.data);
      this.$store.commit("SET_MessageCount", this.receiveMessage.msgNum);
      this.openMessage(this.receiveMessage);
    },
    websocketsend(agentData) {
      // 数据发送
      this.websock.send(agentData);
    },
    webSocketOnError(e) {
      console.log("与服务端连接异常->", e);
    },
    webSocketOnClose(e) {
      console.log("与服务端连接关闭->", e);
    },
    openMessage(val) {
      if (val.approveState === "0") {
        const h = this.$createElement;
        this.$notify({
          title: "你有新的待办事项！",
          dangerouslyUseHTMLString: true,
          // showClose: false,
          message: h("p", null, [
            h("span", {
              class: "details", on: {
                click: () => { this.clickBtnDetails(val); }
              }
            }, "详情>"),
            h("p", null, '"' + this.receiveMessage.title + '"' + this.receiveMessage.approveStateName + "！"),
            h("p", null, "提交人：" + this.receiveMessage.submitUserName),
            h("p", null, "提交时间：" + this.receiveMessage.formatTime),
            h("span", {
              class: "daiban",
              on: {
                click: () => { this.clickBtnAgree(); }
              }
            }, "同意"),
            h("span", {
              class: "bohui",
              on: {
                click: () => { this.clickBtnReject(); }
              }
            }, "驳回"),
            h("span", {
              class: "zanbuchuli",
              on: {
                click: () => { this.clickBtnNotProcessedTemporarily(); }
              }
            }, "暂不处理")
          ]),
          duration: 0
        });
      } else if (val.approveState === "1" || val.approveState === "2") {
        const h = this.$createElement;
        this.$notify({
          title: "你有新的待办事项！",
          dangerouslyUseHTMLString: true,
          // showClose: false,
          message: h("p", null, [
            h("span", {
              class: "details", on: {
                click: () => { this.clickBtnDetails(val); }
              }
            }, "详情>"),
            h("p", null, '"' + this.receiveMessage.title + '"' + this.receiveMessage.approveStateName + "！"),
            h("p", null, "发布人：" + this.receiveMessage.issueUserName),
            h("p", null, "发布时间：" + this.receiveMessage.formatTime)
          ]),
          duration: 0
        });
      }

    },
    // 详情
    clickBtnDetails(val) {
      this.$router.push({ path: val.route });
      this.$notify.closeAll();
    },
    // 同意
    clickBtnAgree() {
      // const UrlType = this.receiveMessage.requestUrl.substr(1, 7); // warning  预警
      console.log(this.receiveMessage.requestUrl);
      const addForm = {
        approveSign: "pass",
        id: this.receiveMessage.formId
      };
      axios.request({
        url: `${this.receiveMessage.requestUrl}`,
        method: "post",
        data: addForm
      }).then(res => {
        if (res) {
          this.$notify.closeAll();
        }
      });
    },
    // 驳回
    clickBtnReject() {
      console.log("驳回");
      // const UrlType = this.receiveMessage.requestUrl.substr(1, 7); // warning  预警
      console.log(this.receiveMessage.requestUrl);
      const addForm = {
        approveSign: "reject",
        id: this.receiveMessage.formId
      };
      axios.request({
        url: `${this.receiveMessage.requestUrl}`,
        method: "post",
        data: addForm
      }).then(res => {
        if (res) {
          this.$notify.closeAll();
        }
      });
    },
    // 暂不处理
    clickBtnNotProcessedTemporarily() {
      this.$notify.closeAll();
    }
  }
};
</script>



<style lang="less">
#esc-app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image: url("./assets/img/bgImg3.png");
  background-size: 100% 100%;
}

.login {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.details {
  position: absolute;
  top: 15px;
  right: 40px;
  color: #169bd5;
  font-size: 13px;
  cursor: pointer;
}

.boxContent {
  font-size: 14px;
  color: #333;
}

.daiban {
  width: 53px;
  height: 29px;
  line-height: 29px;
  text-align: center;
  padding: 2px;
  display: inline-block;
  background-color: #169bd5;
  font-size: 13px;
  color: #fff;
  margin-top: 10px;
  margin-left: 2px;
  border-radius: 4px;
  cursor: pointer;
}

.bohui {
  width: 53px;
  height: 29px;
  line-height: 29px;
  text-align: center;
  padding: 2px;
  display: inline-block;
  background-color: #ec808d;
  font-size: 13px;
  color: #fff;
  margin-top: 10px;
  margin-left: 50px;
  border-radius: 4px;
  cursor: pointer;
}

.zanbuchuli {
  width: 53px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  padding: 2px;
  display: inline-block;
  background-color: #fff;
  border: 1px solid #333333;
  font-size: 13px;
  color: #333333;
  margin-top: 10px;
  margin-left: 40px;
  border-radius: 4px;
  cursor: pointer;
}

:deep(.el-notification__closeBtn) {
  top: 5px;
  right: 5px;
}
</style>
